<style scoped>
@import "@/assets/table.css";
</style>
<template>
  <el-table
      :data="tableData"
      class="tableWH"
      @selection-change="handleSelectionChange"
      :header-cell-style="{background:'#eee',color:'#606266'}"
      @sort-change="sortChange"
  >
    <el-table-column
        type="selection"
        header-align="center"
        align="center"
    />

    <el-table-column
        :label="tableDataText.id"
        prop="id"
        header-align="center"
        align="center"
    >
      <template #default="scope">
        {{scope.$index+1+pageSize*(currentPage-1)}}
      </template>
    </el-table-column>

    <el-table-column
        :label="tableDataText.goodName"
        prop="goodName"
        header-align="center"
        align="center"
    />

    <el-table-column
        :label="tableDataText.number"
        prop="number"
        header-align="center"
        align="center"
    />

    <el-table-column
        :label="tableDataText.costPrice"
        prop="costPrice"
        header-align="center"
        align="center"
    />

    <!--    <el-table-column-->
    <!--        :label="tableDataText.per"-->
    <!--        prop="per"-->
    <!--        header-align="center"-->
    <!--        align="center"-->
    <!--    />-->

    <el-table-column
        :label="tableDataText.entryPerson"
        prop="entryPerson"
        header-align="center"
        align="center"
    />

    <el-table-column
        prop="remark"
        :label="tableDataText.remark"
        header-align="center"
        align="center"
    />

    <el-table-column
        prop="time"
        :label="tableDataText.time"
        header-align="center"
        align="center"
        sortable="custom"
    />

    <el-table-column
        :label="tableDataText.handle"
        header-align="center"
        align="center"
    >
      <template #default="scope">
        <el-button
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
        >
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div
      class="pagination"
  >
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="10"
        @current-change="currentChange"
        v-model:current-page="currentPage"
    />
  </div>
  <el-dialog
      v-model="dialogFormVisibleUpdate"
      width="500"
      title="入库记录编辑"
  >
    <el-form
        :model="dialogFormData"
        label-width="auto"
    >
      <el-form-item
          :label="`${tableDataText.id}：`"
      >
        <el-input
            v-model="dialogFormData.id"
            disabled="disabled"
        />
      </el-form-item>

      <el-form-item
          :label="`${tableDataText.goodName}：`"
      >
        <el-input
            v-model="dialogFormData.goodName"
            disabled="disabled"
        />
      </el-form-item>

      <el-form-item
          :label="`${tableDataText.number}：`"
      >
        <el-input
            v-model="dialogFormData.number"
            type="number"
        />
      </el-form-item>

      <el-form-item
          :label="`${tableDataText.costPrice}：`"
      >
        <el-input
            v-model="dialogFormData.costPrice"
            type="number"
        />
      </el-form-item>

      <el-form-item
          :label="`${tableDataText.per}：`"
      >
        <el-input
            v-model="dialogFormData.per"
            disabled="disabled"
        />
      </el-form-item>

      <el-form-item
          :label="`${tableDataText.entryPerson}：`"
      >
        <el-input
            v-model="dialogFormData.entryPerson"
        />
      </el-form-item>

      <el-form-item
          :label="`${tableDataText.time}：`"
      >
        <el-input
            v-model="dialogFormData.time"
            disabled="disabled"
        />
      </el-form-item>

      <el-form-item
          :label="`${tableDataText.remark}：`"
      >
        <el-input
            v-model="dialogFormData.remark"
            type="textarea"
            placeholder="请输入备注信息"
            show-word-limit
            maxlength="250"
        />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisibleUpdate = false">取消</el-button>
        <el-button type="primary" @click="updateGoodsIn">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
      v-model="dialogFormVisibleDelete"
      title="入库记录删除"
      width="500"
  >
    <span>确定删除吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisibleDelete = false">取消</el-button>
        <el-button type="primary" @click="deleteGoodsIn">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {ElMessage, ElTable} from 'element-plus'
import {
  getGoodsInAPI,
  updateGoodsInAPI,
  deleteGoodsInAPI
} from "@/axios/api";

const pageSize = ref(10)
const currentPage = ref(1)
const total = ref(0)
const sort = ref(1)
const dialogFormVisibleUpdate = ref(false)
const dialogFormVisibleDelete = ref(false)
const dialogFormData = ref({})
const handleDeleteIndex = ref(0)
const tableDataText = {
  id: "入库编号",
  goodName: "商品名称",
  number: "商品数量",
  costPrice: "单价",
  per: "单位",
  remark: "商品备注",
  time: "商品时间",
  entryPerson: "录入人员",
  handle: "操作"
}
const tableData = ref([])
const multipleSelection = ref([])

function getGoodsIn() {//获取入库记录
  getGoodsInAPI({
    pageNum: currentPage.value,//当前页码
    pageSize: pageSize.value,//当前页数
    sort: sort.value
  }).then(data => {
    console.log(data)
    tableData.value = data.data.data.storageList
    total.value = data.data.data.total
    console.log(tableData.value)
    console.log("total:", total.value)
  })
}

onMounted(() => {
  getGoodsIn()
})

function currentChange() {//分页
  console.log(currentPage.value)
  getGoodsIn()
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
const handleEdit = (index: number, row) => {//入库编辑
  dialogFormData.value = JSON.parse(JSON.stringify(row))
  // dialogFormData.value
  console.log(dialogFormData.value)
  dialogFormVisibleUpdate.value = true
}

function updateGoodsIn() {//入库修改
  dialogFormVisibleUpdate.value = false
  console.log(dialogFormData.value)
  updateGoodsInAPI({
    id: dialogFormData.value.id,
    gid: dialogFormData.value.gid,
    number: Number(dialogFormData.value.number),
    entryPerson: dialogFormData.value.entryPerson,
    remark: dialogFormData.value.remark,
    costPrice: Number(dialogFormData.value.costPrice),
    per: dialogFormData.value.per
  }).then(data => {
    console.log(data)
    getGoodsIn()
    ElMessage.success(data.data.data)
  })
}

const handleDelete = (index: number, row) => {//入库删除
  handleDeleteIndex.value = row.id
  dialogFormVisibleDelete.value = true
}

function deleteGoodsIn() {
  if (multipleSelection.value.length == 0) {
    deleteGoodsInAPI({
      ids: handleDeleteIndex.value
    }).then(data => {//入库删除
      console.log(data)
      getGoodsIn()
      ElMessage.success(data.data.data)
    })
  } else {
    for (let i = 0; i < multipleSelection.value.length; i++) {
      deleteGoodsInAPI({
        ids: multipleSelection.value[i].id
      }).then(data => {//入库删除
        console.log(data)
        getGoodsIn()
        if (i == multipleSelection.value.length - 1) {
          ElMessage.success(data.data.data)
        }
      })
    }
  }
  dialogFormVisibleDelete.value = false
}

function sortChange(val) {
  console.log(val)
  if (val.order == "ascending" || val.order == null) {
    sort.value = 0
  } else if (val.order == "descending") {
    sort.value = 1
  }
  getGoodsIn()
}
</script>
